<template>
    <div>
        <div class="big">
            <div class="nav">
                <div class="bx"> 
                    <div class="title">
                        
                        <p v-for="(v,index) in navList" :key="index" @click="funTitle(index,v.routes)" :class="{fs:current==index}">{{ v.title }}</p>
                    </div>
                    <div class="search">
                        <img src="https://gw.alicdn.com/imgextra/i1/O1CN01LIQTFW1FMg0QLDnTc_!!6000000000473-2-tps-60-60.png_110x10000.jpg_.webp" alt="">
                        <span>管理</span>
                    </div>
                </div>
            </div>
        </div>
        <transition :name="transitionName">

            <routerView class="transitionBody"></routerView>
        </transition>

    
    </div>
</template>

<script>
export default {
    name:"collectNav",
    data(){
        return {
            navList:[
                {
                    title:"宝贝",routes:"/collect/body"
                },
                {
                    title:"图文",routes:"/collect/photo"
                },
                {
                    title:"视频",routes:"/collect/video"
                },
                {
                    title:"话题",routes:"/collect/conver"
                },
                {
                    title:"清单",routes:"/collect/form"
                },
            ],
            current:0,
            transitionName: 'transitionLeft',
        }
    },
    methods:{
        funTitle(index,path){
            this.current = index,
            this.$router.push(path)
        },
    },
    watch: {
    '$route'(to, from) {
        const arr = ["/collect/body", "/collect/photo", "/collect/video", "/collect/conver", "/collect/form"]
        this.transitionName = arr.indexOf(to.path) > arr.indexOf(from.path) ? 'transitionLeft' : 'transitionRight'
        }
    }
}
</script>

<style lang="scss" scoped>
    .big {
        width: 100%;
        height: 0.88rem;
        background: #fff;
    }
    .big .nav {
        width: 100%;
        height: 0.88rem;
        border-top-left-radius: 0.4rem;
        border-top-right-radius: 0.4rem;
        background: #f5f5f5;
        overflow: hidden;
    }
    .big .nav .bx {
        width: 7.28rem;
        margin: auto;
        display: flex;
        justify-content: space-between;
        font-size: 0.3rem;
        color: #3f3f3f;
        margin-top: 0.39rem;
    }
    .big .nav .bx .title {
        display: flex;

    }
    .big .nav .bx .title p {
        margin-right: 0.3rem;
        height: 0.24rem;
        line-height: 0.24rem;
    }
    .big .nav .bx .search {
        margin-left: 1.43rem;
        height: 0.45rem;
    
    }
    .big .nav .bx .search img {

        width: 0.37rem;
        height: 0.37rem;
    }
    .big .nav .bx .search span {
     
        color: #111111;
        font-size: 0.3rem;
    }
    .fs {
        color: #ff5000;
        font-size: 0.36rem;
    }
    // 路由过度
    .transitionBody{
    transition: all 0.4s ease-out;
    }
    .transitionLeft-enter,
    .transitionRight-leave-active {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
    }
    .transitionLeft-leave-active,
    .transitionRight-enter {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    }
    .transitionLeft-enter-active,
    .transitionRight-enter-active {  //防止过渡时元素抖动
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    }
</style>